<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar
      title="编辑资料"
      left-arrow
      @click-left="$router.back()"
      fixed
    />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
          <input
            type="file"
            ref="ip"
            v-show="false"
            accept="image/*"
            @change="uploadimage"
          />
          <van-image
            round
            class="avatar"
            :src="userInfo.photo"
            @click="$refs.ip.click()"
          />
        </template>
      </van-cell>
      <van-cell
        title="名称"
        is-link
        :value="userInfo.name"
        @click="
          show = true;
          newName = userInfo.name;
        "
      />
      <van-dialog
        v-model="show"
        title="标题"
        show-cancel-button
        :before-close="beforeClose"
      >
        <input type="text" v-FC v-model="newName" />
      </van-dialog>
      <van-cell
        title="生日"
        is-link
        :value="userInfo.birthday"
        @click="setBirthday"
      />
      <van-popup
        v-model="showData"
        round
        position="bottom"
        :style="{ height: '50%' }"
      >
        <van-datetime-picker
          v-model="currentDate"
          @confirm="setDate"
          @cancel="cancelData"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-popup>
    </van-cell-group>
  </div>
</template>

<script>
import { Notify } from "vant";
import { getUserProfile, upLoadImage, editUserInfo } from "@/api/user";
import { parseTime } from "@/utils/parseTime";
export default {
  name: "UserEdit",
  data() {
    
    return {
      userInfo: {},
      show: false,
      newName: "",
      minDate: new Date(1920, 0, 1),
      // 当前时间
      maxDate: new Date(),
      // 打开后显示的日期
      currentDate: new Date(2021, 0, 17),
      showData: false,
    };
  },

  async created() {
    const res = await getUserProfile();
    console.log(res);
    this.userInfo = res.data.data;
  },
  methods: {
    // changeImageFn() {
    //   this.$refs.ip.click;
    // },

    // 设置生日界面弹出
    setBirthday() {
      // 格式一样才能正确显示
      this.currentDate = new Date(this.userInfo.birthday);
      console.log(this.currentDate);
      this.showData = true;
    },
    // 退出日期界面
    cancelData() {
      this.showData = false;
    },
    // 修改日期
    async setDate(value) {
      this.showData = false;
      console.log(value);
      const res = await editUserInfo({
        birthday: parseTime(value),
      });
      this.userInfo.birthday = parseTime(value);
    },

    // 上传头像
    async uploadimage(e) {
      console.log(e.target.files[0]);
      if (e.target.files[0].length == 0) return;
      const fd = new FormData();
      fd.append("photo", e.target.files[0]);
      const res = await upLoadImage(fd);
      console.log(res);
      this.userInfo.photo = res.data.data.photo;
    },
    // 关闭前的校验
    async beforeClose(action, done) {
      // console.log(action);
      if (action == "confirm") {
        // 正则校验
        const reg = /^[A-Za-z0-9_\-\\\\u4e00-\\\\u9fa5]{1,7}$/;
        // console.log(this.newName);
        if (reg.test(this.newName)) {
          done();
          // 绑定到当前对象,名字改变
          this.userInfo.name = this.newName;
          // 通过正则
          const res = await editUserInfo({ name: this.userInfo.name });
          console.log(res);
        } else {
          Notify({ type: "warning", message: "用户名必须是1-7位中英文或数字" });
          done(false);
        }
      } else {
        done();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
::v-deep .van-dialog__content {
  text-align: center;
  input {
    border: none;
    padding: 0;
    outline: none;
    text-align: center;
  }
}
</style>
